<template>
  <Page name="额度审核">
    <div class="tabs">
      <div class="tabs-wrap">
          <ul>
            <li v-for="(item,index) in tabs" :class=" index == idx ? 'on' : ''" @click="change(item,index)">{{item.text}}</li>
          </ul>
      </div>
    </div>
    <div class="h88"></div>
    <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>
    <ScrollList :config="config" @bottom="getPage" @pull="pull">
      <div class="credit" >
        <ul>
          <li  v-for="item in list">
            <h4>
              <span>花木兰</span>
              <span>400.00 CNY</span>
            </h4>
            <p>
              <span>2018-09-30 15:30</span>
              <span :class="item.status==-1?'red':(item.status==0?'yellow':'')">
                <span v-if="item.status==0">提交申请</span>
                <span v-else-if="item.status==-1">已驳回</span>
                <span v-else-if="item.status==-2">取消申请</span>
                <span v-else="item.status==-2">已同意</span>
              </span>
            </p>
            <div class="button-group" v-if="item.status==0">
              <button class="cancle" @click="reject(item)">驳回</button>
              <button class="agree" @click="agree(item)">同意</button>
            </div>
          </li>
        </ul>
        <ui-empty :empty="empty" v-if="list.length==0"></ui-empty>
      </div>
    </ScrollList>
  </Page>
</template>

<script>
import Page from '~/components/page';
import ScrollList from '~/components/ScrollList';
import UILoading from  "~/components/loading";
import UiEmpty from  "~/components/empty";
export default {
  components: {
    Page,
    ScrollList,
    [UILoading.name]: UILoading,
    UiEmpty
  },
  data(){
    return {
      initLoading:true,
      idx:0,
      config:{
        bottom:false,
        pull:false,
        end:false,
      },
      page:1,
      total:1,
      loading:false,
      list:[],
      empty:{
        text:"暂无数据"
      },
      managers:[],
      tabs:[
        {
          text:"全部",
          id:99
        },
        {
          text:"待审核",
          id:0
        },
        {
          text:"已同意",
          id:1
        },
        {
          text:"已驳回",
          id:-1
        },
      ],
      pullId:""
    }
  },
  mounted(){
    (async ()=>{
      await this.getPage(99,0);
    })();
  },
  methods:{
    reject(item){
      this.$router.push({path:'credit/reject',query:{bill_id:item.bill_id}});
    },
    agree(item){
      this.$router.push({path:'credit/argee',query:{bill_id:item.bill_id}});
    },
    change(item,i){
      this.idx=i;
      this.loading=false;
      this.page=1;
      this.config.end=false;
      this.list=[];
      this.initLoading=true;
      this.pullId = item.id;
      (async ()=>{
        await this.getPage(item.id);
      })();
    },
    async pull(cb){
      this.$nuxt.$loading.start();
      this.page = 1;
      this.config.end = false;
      await this.getPage(this.pullId ,true);
      this.$nuxt.$loading.finish();
      cb();
    },
    async getPage(status,isRefresh){
      if(this.loading || this.config.end) return false;
      this.loading = true;
      let params = {
         page:this.page,
         tab:"my_audit",
         status:status
      }
      try{
        let { data:rs } = await this.$axios.post('?ct=api&ac=apply_list',params)
        if(rs.code == 0){
          this.initLoading = false;
          const { data } = rs;
          this.total = Number(data.total);
          
          if(isRefresh){
            this.list = data.list;
          }else{
            this.list = this.list.concat(data.list);
          }
          

          if(this.total>this.list.length){
            this.page++;
          }else{
            this.config.end = true;
          }
        }else{
          this.initLoading = false;
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }

      this.loading = false;
    },
  },
 
}
</script>

<style lang="less" scoped>
 .tabs{
   position: fixed;
   top:88px;
   left:0;
   line-height: 88px;
   background: #fff;
   width:100%;
   ul{
     li{
       width:25%;
       float: left;
       text-align: center;
       font-size:30px;
      
     }
     li.on{
        position: relative;
        color:#2086f9;
        &:after{
          content: "";
          width:32px;
          height:4px;
          background: #2086f9;
          position: absolute;
          bottom:4px;
          left:50%;
          margin-left:-16px;
        }
     }
   }
 }
 .credit{
   ul{
     padding:0 30px;
     li{
       border-radius: 8px;
       border:1px solid #ededed;
       background: #fff;
       padding:20px 30px 0;
       margin-top:20px;
       h4{
         margin-bottom:20px;
         font-size:30px;
         color:#292929;
         font-weight: normal;
         span:last-child{
           float: right;
         }
       }
       p{
          margin-bottom:20px;
          font-size:24px;
          color:#999;
          font-weight: normal;
          span:last-child{
            float: right;
          }
          span.red{
            color:#ee4c25;
          }
          span.yellow{
           color:#d98900;
         }
       }
       .button-group{
          text-align: right;
          border-top:1px solid #ededed;
          padding-top:20px;
         button{
           font-size:28px;
           width:150px;
           line-height: 60px;
           border:2px solid #c0c3cc;
           color:#666;
           background: #fff;
           border-radius: 60px;
           margin-right:20px;
           margin-bottom:20px;
         }
         button:last-child{
           border:2px solid #2086f9;
           color:#2086f9;
         }
       }
     }
   }
 }
 .h88{
   height:88px;
 }
</style>
